/**********************************************************
 *
 *                      根据ID读取组态基础数据
 *
 * *********************************************************/
import api from 'axios'
import {
  CBorder, CDataNode,
  CPropsNode,
  CComponentTreeNode,
  CPosition,
  CShape, CMotionNode,
  CGraphEntity, CEventNode
} from 'stores/editorModels';
import { uivBaseVOAPI } from 'src/util/UivBaseConst'
import { useEditorStore } from 'stores/editorStore';
import { uid } from 'quasar';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';


export function useEditorCreateComponent () {
  //store
  const store = useEditorStore();

  //消息通知
  const {
    showMessage
  } = useMessageNotify();

  //根据基础信息，生成1个新component组件，CGraphEntity
  const generateComponent = (item: CComponentTreeNode, id: number, pageId: number,
    sid: string): CGraphEntity => {
    let component: CGraphEntity = {
      id: 0,
      typeId: 0,
      pageId: 0,
      comLabel: '',
      comValue: '',
      comSid: '',

      position: {} as CPosition,
      shape: {} as CShape,
      border: {} as CBorder,
      propsItem: [] as CPropsNode[],
      dataItem: [] as CDataNode[],
      motionItem: [] as CMotionNode[],
      eventItem: [] as CEventNode[]
    } as CGraphEntity;

    component.id = id;
    component.typeId = item.typeId;
    component.pageId = pageId;
    component.comLabel = item.comLabel;
    component.comValue = item.comValue;
    component.comSid = sid;

    (component.position as CPosition).x = item.left;
    (component.position as CPosition).y = item.top;
    (component.position as CPosition).w = item.width;
    (component.position as CPosition).h = item.height;

    (component.shape as CShape).backgroundColor = item.backgroundColor;
    (component.shape as CShape).opacity = item.opacity;
    (component.shape as CShape).visible = item.visible;
    (component.shape as CShape).zIndex = item.zindex;
    (component.shape as CShape).transform = item.transform;

    (component.border as CBorder).width = item.borderWidth;
    (component.border as CBorder).radius = item.borderRadius;
    (component.border as CBorder).line = item.borderLine;
    (component.border as CBorder).color = item.borderColor;

    component.minWidth = item.minWidth;
    component.minHeight = item.minHeight;

    //props属性
    if ((item.propsItem) && (item.propsItem.length > 0)) {
      item.propsItem.forEach((el) => {
        component.propsItem?.push(el);
      })
    }

    //console.log(component);
    return component;
  }

  //根据id查询组件基础数据
  const createComponent = (comId: number, pageId: number) => {
    if (pageId <= 0) {
      showMessage('当创建新组件时，页面ID出错！');
      return;
    }
    if (comId <= 0) {
      showMessage('组件ID出错！');
      return;
    }

    //读取组件信息
    api.post(uivBaseVOAPI.UIV_COM_VO_LIST, { id: comId }).then((res: any) => {
      if (res.data.message === 'Success') {
        let item: CComponentTreeNode = res.data.data;
        console.log(item);

        //将组件添加到store中,新生成组件id=0,pageId为当前页面pageId, sid为新生成
        let myItem = generateComponent(item, 0, pageId, uid());
        store.addComponents(myItem);
      } else {
        showMessage(res.data.message);
      }
    }).catch((error) => {
      showMessage(error.message);
    });
  };

  return {
    createComponent
  };
}
